<template>
	<div class="flex flex-row justify-sb wrap">
		<div class="flex flex-row justify-sb flex-1 mr-2">
			<el-tabs v-model="tabActive">
				<el-tab-pane label="销售额" name="sale"></el-tab-pane>
				<el-tab-pane label="访问量" name="pv"></el-tab-pane>
			</el-tabs>
			<el-radio-group size="small" v-model="tabPosition">
				<el-radio-button label="today">今日</el-radio-button>
				<el-radio-button label="week">本周</el-radio-button>
				<el-radio-button label="month">本月</el-radio-button>
				<el-radio-button label="year">本年</el-radio-button>
			</el-radio-group>
		</div>
		<el-date-picker size="small" v-model="datas" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
	</div>
</template>
<script>
export default {
	name: 'SalesHeader',
	computed() {},
	data() {
		return {
			datas: '',
			tabActive: 'sale',
			tabPosition: 'today',
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						},
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						},
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						},
					},
				],
			},
		};
	},
	watch: {
		tabActive(val) {
			this.$emit('eTabActive', val);
		},
	},
};
</script>
<style lang="scss" scoped>
.wrap {
	height: 39px;
	border-bottom: 1px solid #eee;
}
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-row {
	flex-direction: row;
}
.justify-sb {
	justify-content: space-between;
}
.mr-2 {
	margin-right: 20px;
}
</style>
